<template>
    <div class="zmaintop">
      <div class="topcenter clearfix">
        <router-link to="/search" tag="b">
        <img src="../images/icon-faxian-search.png">
        </router-link>
        <router-link to="/main" tag="span" class="beauty">美丽推荐</router-link>
        <router-link to="/changebeauty" tag="span">学变美</router-link>
        <!--<img src="../images/icon_yingdai_01.png"> -->
      </div>
    </div>
</template>
<script>
  export default {
    name: 'zmaintop',
    data() {
      return {
      lists: [
        {
          name:'美丽推荐',
          path:'/'
        },{
          name:'学变美',
          path:'/mbeaty'
        }
      ],
      ind: ''
    }
  },
  methods: {
    changeBgc: function (index) {
      this.ind = index
    }
  }
    
  }

</script>

<style lang="less" scoped>
.zmaintop{
  text-align: center;
}
b{
  float: left;
}
.router-link-active {
    border-bottom: 4px solid #fff;
}
span{
  box-sizing: border-box;
  padding:0 10/75rem;
}
.zmaintop{
  height: 88/75rem;
  background-color: #ff406f;
  font-family: "苹方常规";
  font-size: 36/75rem;
  color: #fff;
  line-height: 88/75rem;
}
.topcenter{
  margin: 0 20/75rem;
}
.beauty{
  margin-right:170/75rem ;
}
img{
  height: 46/75rem;
  width: 46/75rem;
  display: block;
  margin-top:21/75rem;
  float: left;
}
img:last-child{
  float: right;

}
.clearfix:after{
    height:0;
    content:" ";
    display:block;
    overflow:hidden;
    clear:both;
  }
.clearfix{
  zoom:1;
}
</style>
